<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>基本信息设置</h3>
      <el-form ref="basicInfo" :rules="rules" :model="basicInfo" label-width="200px">
        <el-form-item label="服务费率" prop="shelveFee">
          <el-input v-model="basicInfo.shelveFee" placeholder="买家商品服务费率" />
        </el-form-item>
        <el-form-item label="会员采购补贴率" prop="upFee">
          <el-input v-model="basicInfo.upFee" placeholder="买家商品涨百分比" />
        </el-form-item>
        <el-form-item label="涨幅额" prop="recommendFee">
          <el-input :value="(Number(basicInfo.upFee)+Number(basicInfo.shelveFee)).toFixed(2)" disabled placeholder="涨幅额" />
        </el-form-item>
        <el-form-item label="积分收益率" prop="scoreFee">
          <el-input v-model="basicInfo.scoreFee" placeholder="积分收益率百分比" />
        </el-form-item>
        <el-form-item label="推荐费率" prop="recommendFee">
          <el-input v-model="basicInfo.recommendFee" placeholder="推荐奖励" />
        </el-form-item>
        <el-form-item label="开放采购时间段" prop="dateRange">
          <el-time-picker
            v-model="basicInfo.startCgTime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="开始时间"
          />
          <el-time-picker
            v-model="basicInfo.endCgTime"
            arrow-control
            :picker-options="{
              selectableRange: `00:00:00 - 23:59:59`
            }"
            placeholder="结束时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="黄金会员采购最大数量" prop="cgCardsNumMax">
          <el-input-number  v-model="basicInfo.cgCardsNumMax" size="large" :step="1" :max="5" :min="1" placeholder="请输入采购最大值，最大为5"></el-input-number>
        </el-form-item>
        <el-form-item label="特权采购时间" prop="cgOrderStartEarlyMinute">
          <el-input type="number" v-model="basicInfo.cgOrderStartEarlyMinute" placeholder="特权采购时间" >

            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="上架时间" prop="dateRange">
          <el-time-picker
            v-model="basicInfo.startTime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="开始时间"
          />
          <el-time-picker
            v-model="basicInfo.endTime"
            arrow-control
            :picker-options="{
              selectableRange: `00:00:00 - 23:59:59`
            }"
            placeholder="结束时间"
          >
          </el-time-picker>
        </el-form-item> -->
      </el-form>

    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { cgBasicConfig, getCgBasicConfig } from '@/api/shop/order'
import { listChannel } from '@/api/shop/channel'

var checkNumber = (rule, value, callback)=>{
  // console.log(value)
  if(Number.parseInt(value)>5){
    callback(new Error('不能大于5'))
  }
  if(value<=0){
    return '不能小于1'
  }
  return true
}
export default {
  name: 'CgInfo',
  data() {
    return {
      rules: {
        shelveFee: [
          { required: true, message: '上架费率不能为空', trigger: 'blur' }
        ],
        upFee: [
          { required: true, message: '会员采购补贴率不能为空', trigger: 'blur' }
        ],
        recommendFee: [
          { required: true, message: '推荐费率不能为空', trigger: 'blur' }
        ],
        scoreFee: [
          { required: true, message: '积分收益不能为空', trigger: 'blur' }
        ],
        // cgCardsNumMax:[{max:5, message: '不能大于5', trigger: "blur" },{min:1, message: '不能小于1', trigger: "blur" },{ type: 'number', message: '必须是数字'}],
      },
      basicInfo: {
        shelveFee: '',
        startTime: '',
        upFee: '',
        recommendFee: '',
        scoreFee: '',
        endTime: '',
        startCgTime:'',
        endCgTime:'',
        cgCardsNumMax:1,
        cgOrderStartEarlyMinute:0
      },
      // 上传路径header设置
      headers: { Authorization: 'Bearer ' + getToken() },
      pickerOptions: {
        disabledDate(time) {
          const max = new Date('2099-12-30')
          const min = new Date('1970-01-01')
          max.setHours(23, 59, 59, 999)
          min.setHours(0, 0, 0, 0)
          return time.getTime() < min.getTime() || time.getTime() > max.getTime()
        }
      }
    }
  },
  async created() {
    await this.init()
  },

  methods: {
    // 初始化
    init: function() {
      this.getData()
    },
    // 获取商品分类
    async getData() {
      const res = await getCgBasicConfig()
      const cgBasicConfig = res.map.cgBasicConfig
      this.$set(this.basicInfo, 'shelveFee', (cgBasicConfig.shelveFeePart * 100).toFixed(2))
      // this.$set(this.basicInfo, 'startTime', new Date(cgBasicConfig.shelveStartDateTime))
      this.$set(this.basicInfo, 'upFee', (cgBasicConfig.listingCash * 100).toFixed(2))
      this.$set(this.basicInfo, 'recommendFee', (cgBasicConfig.recommendRewardProportion * 100).toFixed(2))
      // this.$set(this.basicInfo, 'endTime', new Date(cgBasicConfig.shelveEndDateTime))
      this.$set(this.basicInfo, 'endCgTime', new Date(cgBasicConfig.endCgTime))
      this.$set(this.basicInfo, 'startCgTime', new Date(cgBasicConfig.startCgTime))
      this.$set(this.basicInfo, 'cgOrderStartEarlyMinute',cgBasicConfig.cgOrderStartEarlyMinute)
      this.$set(this.basicInfo, 'cgCardsNumMax',cgBasicConfig.cgCardsNumMax || 1)

      this.$set(this.basicInfo, 'scoreFee', (cgBasicConfig.listingPoints * 100).toFixed(2))

      // res.
      console.log(cgBasicConfig)
    },
    // 关闭当前页面
    handleCancel: function() {
      this.$router.push({ path: '/shop/goods' })
    },
    // 上架商品
    handlePublish: function() {
      // if (this.basicInfo.startTime === '' || this.basicInfo.endTime === '') {
      //   return this.$message.error('上架起始时间不能为空')
      // }
      if (this.basicInfo.startCgTime === '' || this.basicInfo.endCgTime === '') {
        return this.$message.error('开放采购时间不能为空')
      }
      const start = new Date(this.basicInfo.startTime)
      // console.log(starts.getTime())
      const end = new Date(this.basicInfo.endTime)
      const startCg = new Date(this.basicInfo.startCgTime)
      // console.log(starts.getTime())
      const endCg = new Date(this.basicInfo.endCgTime)
      // if (end < start) {
      //   return this.$message.error('结束时间不能小于开始时间')
      // }
      if (endCg < startCg) {
        return this.$message.error('结束时间不能小于开始时间')
      }
      this.$refs.basicInfo.validate((res)=>{
        console.log(res)
        if(!res) return;
        cgBasicConfig({
          'shelveFeePart': (this.basicInfo.shelveFee / 100).toFixed(4),
          // 'shelveStartDateTime': start.getTime(),
          // 'shelveEndDateTime': end.getTime(),
          'startCgTime':startCg.getTime(),
          'endCgTime':endCg.getTime(),
          'shelveUpFee': (this.basicInfo.upFee / 100).toFixed(4),
          'recommendRewardProportion': (this.basicInfo.recommendFee / 100).toFixed(4),
          'listingPoints': (this.basicInfo.scoreFee / 100).toFixed(4),
          'listingCash': (this.basicInfo.upFee / 100).toFixed(4),
          'cgCardsNumMax':this.basicInfo.cgCardsNumMax,
          'cgOrderStartEarlyMinute':this.basicInfo.cgOrderStartEarlyMinute
        }).then(res => {
          if (res.code !== 200) {
            this.$message.error(res.msg)
            return
          }
          this.$message.success('操作成功')
        })
      })
      
    }
  }
}
</script>
<style scoped>
.op-container {
  display: flex;
  justify-content: center;
}
</style>
